<script setup lang="ts">
import { mobileRules, passwordRules, codeRules } from '@/utiles/rules'
import { ref } from 'vue';
import { showToast, showSuccessToast, type FormInstance } from 'vant'
import { loginByPassword, sendMobileCode, loginByMobile } from '@/services/user'
import { useUserStore } from '@/stores';
import { useRoute, useRouter } from 'vue-router';
import { onMounted } from 'vue';

// 表单信息
const mobile = ref('13230000063')
const password = ref('abc12345')
const code = ref('')

// 密码显示
const show = ref(false)

// 协议
const agree = ref(false)

// 切换界面
const isPass = ref(true)

// 登录事件
const store = useUserStore()
const route = useRoute()
const router = useRouter()
const login = async () => {
	if (!agree.value) return showToast('请勾选我同意')
	const res = isPass.value
		? await loginByPassword(mobile.value, password.value)
		: await loginByMobile(mobile.value, code.value)

	store.setUser(res.data)
	router.replace((route.query.returnUrl as string) || '/user')
	showSuccessToast('登陆成功')
}

// 点击发送验证码事件
const form = ref<FormInstance>()
const time = ref(0)
let timeId: number
const send = async () => {
	if (time.value > 0) return
	await form.value?.validate('mobile')
	const res = await sendMobileCode(mobile.value, 'login')
	console.log(res);

	showSuccessToast('发送成功')
	time.value = 60
	clearInterval(timeId)
	timeId = window.setInterval(() => {
		time.value--
		if (time.value <= 0) window.clearInterval(timeId)
	}, 1000)
}
onMounted(() => {
	window.clearInterval(timeId)
})
</script>

<template>
	<div class="login-page">
		<cp-nav-bar title="登录" right-text="注册" @click="$router.push('/register')"></cp-nav-bar>
		<!-- 头部 -->
		<div class="login-head">
			<h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>
			<a href="javascript:;" @click="isPass = !isPass">
				<span>{{ isPass ? '短信验证码登录' : '密码登录' }}</span>
				<van-icon name="arrow"></van-icon>
			</a>
		</div>
		<!-- 表单 -->
		<van-form autocomplete="off" @submit="login">
			<van-field v-model="mobile" name="mobile" :rules="mobileRules" placeholder="请输入手机号" type="tel"></van-field>
			<van-field v-if="isPass" v-model="password" :rules="passwordRules" placeholder="请输入密码"
				:type="show ? 'text' : 'password'">
				<template #button>
					<!-- <van-icon @click="show = !show" :name="show ? 'eye-o' : 'closed-eye'"></van-icon> -->
					<cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
				</template>
			</van-field>

			<van-field v-else v-model="code" :rules="codeRules" placeholder="短信验证码">
				<template #button>
					<span class="btn-send" :class="{ active: time > 0 }" @click="send">{{ time > 0 ? `${time}s后再次发送` : '发送验证码'
					}}</span>
				</template>
			</van-field>
			<div class="cp-cell">
				<van-checkbox v-model="agree">
					<span>我已同意</span>
					<a href="javascript:;">用户协议</a>
					<span>及</span>
					<a href="javascript:;">隐私条款</a>
				</van-checkbox>
			</div>
			<div class="cp-cell">
				<van-button block round type="primary" native-type="submit">登录</van-button>
			</div>
			<div class="cp-cell">
				<a href="javascript:;">忘记密码</a>
			</div>
		</van-form>
		<!-- 底部 -->
		<div class="login-other">
			<van-divider>第三方登录</van-divider>
			<div class="icon">
				<img src="@/assets/qq.svg" alt="">
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.login {
	&-page {
		padding-top: 46px;
	}

	&-head {
		display: flex;
		padding: 30px 30px 50px;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 1;

		h3 {
			font-weight: normal;
			font-size: 24px;
		}

		a {
			font-size: 15px;
		}
	}

	&-other {
		margin-top: 60px;
		padding: 0 30px;

		.icon {
			display: flex;
			justify-content: center;

			img {
				width: 36px;
				height: 36px;
				padding: 4px;
			}
		}
	}
}

.van-form {
	padding: 0 14px;

	.cp-cell {
		height: 52px;
		line-height: 24px;
		padding: 14px 16px;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.van-checkbox {
			a {
				color: var(--cp-primary);
				padding: 0 5px;
			}
		}
	}

	.btn-send {
		color: var(--cp-primary);

		&.active {
			color: rgba(22, 194, 163, 0.5);
		}
	}
}
</style>

